<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机更换页面颜色</title>
    <script>
        // 定义一个为changeBackground Color的函数生成随机颜色设置为页面背景色
        function changeBackgroundColor() {
            // "Math.random() * 16777215"0~16777215的随机数，toString(16)结果转16进制的字符串
            var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            // document.body.style.backgroundColor   修改网页背景颜色
            document.body.style.backgroundColor = randomColor;
        }
        // 监听键盘按键事件，当按下F键时，调用上函数
        // addEventListener：表示方法，可以用于监听键盘按键
        // keydown：键盘按键按下事件。
        // function(event) {...}：表示当事件发生时要执行的回调函数，event表示触发对象。
        document.addEventListener('keydown', function(event) {
            // 当按下F键（键码为70）时
            if (event.keyCode === 70) {
                // 调用changeBackgroundColor函数。
                changeBackgroundColor();
            }
        });
    </script>
</head>
<!-- 页面初始为白 -->
<body style="background-color: #fff;">
</body>
</html>